<template>
  <div>
    <v-header title="确认订单">
      <v-back></v-back>
    </v-header>
    <!-- 头部 -->
    <header id="ord_header">
      <div class="ma">
        <van-button
          v-show="!end_address"
          id="btn"
          plain
          hairline
          type="info"
          block
          color="rgb(230,172,106)"
          @click="choose_address"
          >+点击完善收货地址</van-button
        >
        <div v-show="end_address" @click="choose_address">
          <h2>{{ end_address.name }}&nbsp;{{ end_address.tel }}</h2>
          <p>
            {{ end_address.address }}
          </p>
        </div>
      </div>
    </header>
    <!-- 订单物品详情 -->
    <main id="ord_main">
      <div class="ord_main_title">
        <p>
          <span class="iconfont">&#xf0179;</span>
          <span>品牌精选</span>
        </p>
        <span class="last">已免运费<a href="#">领券</a></span>
      </div>
      <div class="ord_main_info" v-for="item in goods" :key="item.id">
        <img :src="'http://localhost:3000' + item.img" alt="" />
        <div>
          <h2>{{ item.goodsname }}</h2>
          <p class="clearfix">
            ￥<strong>{{ item.price }}</strong
            ><span class="fr">x{{ item.num }}</span>
          </p>
          <div class="seven_day">
            <div>七天无理由退货</div>
            <div>特价</div>
          </div>
        </div>
      </div>
      <p class="invoice clearfix">
        发票类型
        <span class="fr">不开发票&nbsp;></span>
      </p>
      <p class="service clearfix">
        售后免邮
        <span class="fr">部分商家赠送</span>
      </p>
      <p class="l_message clearfix">
        买家留言
        <span class="fr">填写内容需要与商家协商并确认，45字以内</span>
      </p>
    </main>
    <!-- 金额以及减免 -->
    <div id="ord_cost">
      <p class="clearfix">
        商品金额
        <span class="fr">￥1998</span>
      </p>
      <p class="clearfix">
        优惠活动
        <span class="fr" style="color: #ff6040">-￥200</span>
      </p>
      <p class="clearfix">
        优惠券
        <span class="fr">暂无可用></span>
      </p>
    </div>
    <!-- 底部 -->
    <footer id="ord_footer">
      <div class="ordf_left">
        <div>
          <h2>合计</h2>
          <p>已免运费</p>
        </div>
        <div>
          <h2>￥{{ totalPrice.price }}</h2>
          <p>已优惠￥200元</p>
        </div>
      </div>
      <div class="ordf_right" @click="sub_order">确认订单</div>
      <van-dialog v-model="show" title="选择地址" show-cancel-button>
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          add-button-text="确认"
          @select="chos"
          @add="yes_chos"
        />
      </van-dialog>
    </footer>
  </div>
</template>

<script>
import { addressList, orderAdd } from "@/request/api.js";
export default {
  data() {
    return {
      chosenAddressId: "1",
      goods: [],
      total: {
        num: 0,
        price: 0,
      },
      show: false,
      list: [],
      end_address: "",
      choose_adress: "",
      idarr: [],
      order_info: {
        uid: "",
        address: "",
        countmoney: 0,
        countnumber: 0,
        idstr: "",
      },
    };
  },
  async created() {
    let a=JSON.parse(this.$route.query.a)
    this.goods = [...a];
    this.uid = this.order_info.uid = JSON.parse(
      localStorage.getItem("userInfo")
    ).uid;
    //请求的地址列表
    let res = await addressList(this.uid);
    res.data.list.forEach((item) => {
      this.list.push({
        id: item.id.toString(),
        name: item.username,
        tel: item.userphone,
        address: item.location + " " + item.useraddress,
      });
    });
    //商品id存入列表
    this.goods.forEach((item) => {
      this.idarr.push(item.id);
    });
    //将列表转为字符串
    this.order_info.idstr = this.idarr.join(",");
  },
  methods: {
    //提交订单
    async sub_order() {
      this.order_info.countmoney = Number(this.totalPrice.price.toFixed(2));
      this.order_info.countnumber = this.totalPrice.num;
      console.log(this.order_info)
      let res = await orderAdd(this.order_info);
      console.log(res)
      if (res.data.code === 200) {
        this.$Toast.success("订单提交成功！");
        setTimeout(() => {
          this.$router.push("/pay?a="+res.data.list.outTradeNo+"&b="+this.totalPrice.price.toFixed(2));
        }, 2000);
      }
    },
    yes_chos() {
      this.end_address = this.choose_adress;
      this.order_info.addressid = Number(this.end_address.id);
      this.show = false;
    },
    chos(item) {
      this.choose_adress = item;
    },
    choose_address() {
      this.show = true;
    },
  },
  computed: {
    totalPrice() {
      this.goods.forEach((item) => {
        this.total.price = this.total.price + item.num * item.price;
        this.total.num += item.num;
      });
      this.total.price=this.total.price
      return this.total;
    },
  },
};
</script>
<style scoped>
#btn {
  background-color: rgb(254, 246, 235);
}
#ord_header {
  height: 0.8rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
  padding-top: 0.1rem;
}
#ord_header .ma {
  padding: 0.2rem;
  box-sizing: border-box;
  width: 3.55rem;
  height: 1.04rem;
  background-color: #fff;
}
#ord_header .ma h2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.18rem;
  color: #333333;
  line-height: 0.18rem;
  font-weight: 600;
}
#ord_main {
  margin-top: 0.34rem;
  background-color: #fff;
  padding: 0 0.1rem;
  overflow: hidden;
}
#ord_main .ord_main_title {
  background-color: #fff;
  padding: 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.2rem;
}
#ord_main .ord_main_title p span:nth-child(2) {
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
  margin-left: 0.08rem;
}
#ord_main .ord_main_title p span:nth-child(1) {
  color: #ff6040;
}
#ord_main .ord_main_title .last {
  font-family: PingFangSC-Regular;
  font-size: 0.12rem;
  color: #333333;
  text-align: right;
  line-height: 0.12rem;
}
#ord_main .ord_main_title a {
  margin-left: 0.095rem;
  padding-left: 0.095rem;
  font-family: PingFangSC-Regular;
  font-size: 0.12rem;
  color: #ff6040;
  text-align: right;
  line-height: 0.12rem;
  border-left: 0.01rem solid #979797;
}
#ord_main .ord_main_info {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
}
#ord_main .ord_main_info img {
  width: 1.09rem;
  height: 1.09rem;
}
#ord_main .ord_main_info div {
  position: relative;
}
#ord_main .ord_main_info div h2 {
  font-family: PingFangSC-Regular;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.24rem;
  width: 2.32rem;
}
#ord_main .ord_main_info div p {
  margin-top: 0.16rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.1rem;
  color: #ff6040;
  line-height: 0.08rem;
}
#ord_main .ord_main_info div p strong {
  font-size: 0.2rem;
  line-height: 0.16rem;
  font-weight: 600;
}
#ord_main .ord_main_info div p span {
  font-size: 16px;
  color: #333333;
  text-align: right;
  line-height: 16px;
}
#ord_main .ord_main_info div .seven_day {
  height: 0.1615rem;
  position: absolute;
  left: 0;
  bottom: 0;
}
#ord_main .ord_main_info div .seven_day div {
  display: inline-block;
  padding: 0 0.03rem;
  background: #ff8066;
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #ffffff;
  line-height: 0.1615rem;
}
#ord_main .invoice {
  margin: 0.3rem 0 0.2rem 0;
  font-family: PingFangSC-Semibold;
  font-size: 0.12rem;
  color: #333333;
  line-height: 0.12rem;
  font-weight: 600;
}
#ord_main .service {
  margin-bottom: 0.2rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.12rem;
  color: #333333;
  line-height: 0.12rem;
  font-weight: 600;
}
#ord_main .service span {
  font-size: 0.12rem;
  color: #666666;
  line-height: 0.12rem;
  font-weight: 500;
}
#ord_main .l_message {
  margin-bottom: 0.2rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.12rem;
  color: #333333;
  line-height: 0.12rem;
  font-weight: 600;
}
#ord_main .l_message span {
  font-size: 0.12rem;
  color: #666666;
  line-height: 0.12rem;
  font-weight: 500;
}
#ord_cost {
  padding: 0.2rem 0.1rem 0;
  background-color: #fff;
  margin-top: 0.1rem;
  overflow: hidden;
}
#ord_cost p {
  margin-bottom: 0.2rem;
  font-family: PingFangSC-Semibold;
  font-size: 0.12rem;
  color: #333333;
  line-height: 0.12rem;
  font-weight: 600;
}
#ord_cost p span {
  font-size: 0.12rem;
  color: #666666;
  line-height: 0.12rem;
  font-weight: 500;
}
#ord_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  height: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#ord_footer .ordf_left {
  padding-left: 0.1rem;
  display: flex;
  justify-content: space-between;
  width: 1.5rem;
}
#ord_footer .ordf_left div:nth-child(1) h2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.16rem;
  font-weight: 600;
}
#ord_footer .ordf_left div:nth-child(1) p {
  margin-top: 0.05rem;
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #999999;
  line-height: 0.1rem;
}
#ord_footer .ordf_left div:nth-child(2) h2 {
  font-family: PingFangSC-Semibold;
  font-size: 0.2rem;
  color: #ff6040;
  text-align: right;
  line-height: 0.16rem;
  font-weight: 600;
}
#ord_footer .ordf_left div:nth-child(2) p {
  margin-top: 0.05rem;
  font-family: PingFangSC-Light;
  font-size: 0.1rem;
  color: #999999;
  line-height: 0.1rem;
}
#ord_footer .ordf_right {
  width: 1.1rem;
  height: 0.5rem;
  background: #ff6040;
  font-family: PingFangSC-Semibold;
  font-size: 0.16rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.5rem;
}
</style>